import React, { useEffect, useRef, useState } from "react";
import { Card, Button, Table, Modal, Form, Input, message, Select } from "antd";
import { PAGE_SIZE } from "../../utils/constants";
import { formateDate } from "../../utils/dateUtils";
import MyButton from "../../components/MyButton";
import {
  reqAddUsers,
  reqDeleteUsers,
  reqUpdateUsers,
  reqUsers,
} from "../../api";

export default function User() {
  // 创建用户的form的ref
  const FormRef = useRef<any>(null);
  // 更新用户信息form的ref
  const FormRefUpdate = useRef<any>(null);
  // 保存所有对应角色信息的roles 建立rolesName的map 设置泛型为<Map<any, any>>
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [rolesNames, setrolesNames] = useState<Map<any, any>>(new Map());
  // 保存所有用户信息的users
  const [users, setusers] = useState<any>([]);
  // 保存所有用户信息的roles
  const [roles, setroles] = useState<any>([]);
  // 控制colume信息的
  const [columes, setcolumes] = useState<any>([]);

  // 获取用户信息列表
  const [deleteModal, setdeleteModal] = useState(false);
  // 点击删除用户就会把当前点击的用户的信息存在deleteUsersInfo中
  const [deleteUsersInfo, setdeleteUsersInfo] = useState<any>();
  // 添加用户对话框的存在
  const [isShowAddModal, setisShowAddModal] = useState(false);
  // 修改用户对话框的存在
  const [isShowUpdateModal, setisShowUpdateModal] = useState(false);
  // 要修改的用户信息
  const [changeUserInfo, setchangeUserInfo] = useState<any>();

  // map设置RoleNames Map对象
  const initRoleNames = (role: any) => {
    for (let index = 0; index < role.length; index++) {
      // 设置rolesNames的map
      rolesNames.set(role[index]._id, role[index].name);
    }
  };

  // 获取用户列表
  const getUserIist = async () => {
    const res = await reqUsers();

    if (res.status === 200) {
      setusers(res.data.data.users);
      initRoleNames(res.data.data.roles);
      setroles(res.data.data.roles);
    } else {
      message.error("获取用户信息失败!");
    }
  };

  const onFinish = (values: any) => {};

  // 初始化colume函数
  const initColumes = () => {
    setcolumes([
      {
        title: "用户名",
        dataIndex: "username",
      },
      {
        title: "邮箱",
        dataIndex: "email",
      },
      {
        title: "电话",
        dataIndex: "phone",
      },
      {
        title: "注册时间",
        dataIndex: "create_time",
        // 格式化时间
        render: (create_time: any) => formateDate(create_time),
      },
      {
        title: "所属角色",
        dataIndex: "role_id",
        // 根据role_id从所用的角色中找到对应的哪一个的name
        // 使用的是hash map来实现
        render: (role_id: any) => rolesNames.get(role_id),
      },
      {
        title: "操作",
        render: (user: any) => (
          <span>
            <MyButton
              placeHolder="修改"
              onClick={() => {
                setisShowUpdateModal(true);
                // 设置form.item对应input中的值
                FormRefUpdate.current?.setFieldsValue({ name: user.username });
                FormRefUpdate.current?.setFieldsValue({
                  password: user.password,
                });
                FormRefUpdate.current?.setFieldsValue({ phone: user.phone });
                FormRefUpdate.current?.setFieldsValue({ email: user.email });
                FormRefUpdate.current?.setFieldsValue({ role: user.role_id });

                setchangeUserInfo(user);
              }}
            ></MyButton>
            <MyButton
              placeHolder="删除"
              onClick={() => {
                setdeleteModal(true);
                setdeleteUsersInfo(user);
              }}
            ></MyButton>
          </span>
        ),
      },
    ]);
  };

  // 删除用户的请求接口调用
  const deleteUser = async (user: any) => {
    const res = await reqDeleteUsers(user);
    if (res.status === 200) {
      message.success("删除成功!");
    } else {
      message.error("删除失败!");
    }
    getUserIist();
    setdeleteModal(false);
  };

  // 发送修改user或者创建user
  const addUser = async () => {
    //收集Form.item中输入的信息
    const username = FormRef.current.getFieldValue("name");
    const password = FormRef.current.getFieldValue("password");
    const phone = FormRef.current.getFieldValue("phone");
    const email = FormRef.current.getFieldValue("email");
    const role_id = FormRef.current.getFieldValue("role");

    // 信息整合
    const info = {
      username,
      password,
      phone,
      email,
      role_id,
    };

    // 用整合后的信息发送请求
    const res = await reqAddUsers(info);
    if (res.status === 200) {
      message.success("创建用户成功!");
    } else {
      message.error("创建用户失败!");
    }
    // 修改后更新用户列表
    getUserIist();
    // 关闭对话框
    setisShowAddModal(false);
  };

  const UpdateUser = async () => {
    // 重新收集用户修改之后的信息 用的是ref - FormRefUpdate
    const username = FormRefUpdate.current.getFieldValue("name");
    const password = FormRefUpdate.current.getFieldValue("password");
    const phone = FormRefUpdate.current.getFieldValue("phone");
    const email = FormRefUpdate.current.getFieldValue("email");
    const role_id = FormRefUpdate.current.getFieldValue("role");

    // 信息整合
    const info = {
      // 修改的_id需要用来确定具体的人
      _id: changeUserInfo._id,
      username,
      password,
      phone,
      email,
      role_id,
    };

    // 用整合后的信息发送请求
    const res = await reqUpdateUsers(info);
    if (res.status === 200) {
      message.success("修改信息成功!");
    } else {
      message.error("修改信息失败!");
    }
    // 修改后更新用户列表
    getUserIist();
    // 关闭对话框
    setisShowUpdateModal(false);
  };

  useEffect(() => {
    // 页面加载的时候初始化colume
    initColumes();
    // 获取所有用户信息列表
    getUserIist();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // 指定form表单里面item布局分布
  const formItemLayout = {
    labelCol: { span: 4 }, // 左侧label的宽度
    wrapperCol: { span: 18 }, // 右侧输入框的宽度
  };
  const title = (
    <Button
      type="primary"
      onClick={() => {
        setisShowAddModal(true);
      }}
    >
      创建用户
    </Button>
  );
  return (
    <Card title={title}>
      <Table
        bordered
        rowKey="_id"
        dataSource={users}
        columns={columes}
        pagination={{ defaultPageSize: PAGE_SIZE }}
      ></Table>
      {/* 删除用户提示信息 */}
      <Modal
        title="删除用户"
        visible={deleteModal}
        onOk={() => {
          deleteUser(deleteUsersInfo._id);
        }}
        onCancel={() => {
          setdeleteModal(false);
        }}
        okText="确认"
        cancelText="取消"
      >
        <p>确定删除该用户吗?</p>
      </Modal>
      {/* 添加用户的对话框 */}
      <Modal
        title="创建用户"
        visible={isShowAddModal}
        onOk={() => {
          addUser();
        }}
        onCancel={() => {
          setisShowAddModal(false);
        }}
        okText="确认"
        cancelText="取消"
      >
        <Form
          {...formItemLayout}
          name="nest-messages"
          onFinish={onFinish}
          ref={FormRef}
        >
          <Form.Item label="用户名称" name="name">
            <Input placeholder="请输入新的用户名称" />
          </Form.Item>
          <Form.Item label="用户密码" name="password">
            <Input.Password placeholder="请输入密码" />
          </Form.Item>
          <Form.Item label="用户手机" name="phone">
            <Input placeholder="请输入手机号" />
          </Form.Item>
          <Form.Item label="用户邮箱" name="email">
            <Input type={"email"} placeholder="请输入邮箱" />
          </Form.Item>
          <Form.Item label="角色" name="role">
            <Select>
              {roles.map((role: any) => (
                <Select.Option key={role._id} value={role._id}>
                  {role.name}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
        </Form>
      </Modal>
      {/* 修改更新用户信息的对话框 */}
      <Modal
        title="修改用户信息"
        visible={isShowUpdateModal}
        onOk={() => {
          UpdateUser();
        }}
        onCancel={() => {
          setisShowUpdateModal(false);
        }}
        okText="确认"
        cancelText="取消"
      >
        <Form
          {...formItemLayout}
          name="nest-messages"
          onFinish={onFinish}
          ref={FormRefUpdate}
        >
          <Form.Item label="用户名称" name="name">
            <Input placeholder="请输入新的用户名称" type="text" />
          </Form.Item>
          <Form.Item label="用户密码" name="password">
            <Input.Password placeholder="请输入密码" />
          </Form.Item>
          <Form.Item label="用户手机" name="phone">
            <Input placeholder="请输入手机号" />
          </Form.Item>
          <Form.Item label="用户邮箱" name="email">
            <Input type={"email"} placeholder="请输入邮箱" />
          </Form.Item>
          <Form.Item label="角色" name="role">
            <Select>
              {roles.map((role: any) => (
                <Select.Option key={role._id} value={role._id}>
                  {role.name}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
        </Form>
      </Modal>
    </Card>
  );
}

// 视频P104
